<template>
  <div class="row-item">
    <span>{{ props.label }}</span>
  </div>
  <div class="row-item">
    <el-slider
      class="progress"
      v-model="model"
      :min="rule.min"
      :max="rule.max"
      :step="rule.step"
      @change="change"
    />
    <el-input class="progress-input" v-model="model" @blur="handle" @keyup.enter.prevent="handle" />
  </div>
</template>

<script setup lang="ts">
import { clamp } from 'lodash';

defineOptions({
  name: 'ProgressItem',
});

interface IProps {
  rule: any;
  label: string;
  modelValue: number;
}

const props = withDefaults(defineProps<IProps>(), {
  rule: {},
  label: '',
  modelValue: 0,
});
const rule = props.rule;
const model = ref(props.modelValue);

const emits = defineEmits(['update:modelValue', 'handler']);

const change = () => {
  const value = model.value;
  emits('update:modelValue', value);
  emits('handler', props.label);
};
const handle = () => {
  let valid = true,
    value = model.value;
  if (isNaN(value)) {
    valid = false;
    return;
  }
  if (typeof value === 'string') {
    value = +value;
  }
  value = clamp(value, rule.min, rule.max);
  model.value = value;
  emits('update:modelValue', value);
  emits('handler', props.label);
};
</script>

<style lang="less" scoped>
.row-item {
  display: flex;
  align-items: center;

  :deep(.el-slider__button) {
    width: 12px;
    height: 12px;
  }

  .progress-input {
    width: 66px;
    margin-left: 7px;
  }
}
</style>
